<!--
 * @Author: 噜噜雯雯 2199987619@qq.com
 * @Date: 2025-05-22 14:32:05
 * @LastEditors: 噜噜雯雯 2199987619@qq.com
 * @LastEditTime: 2025-07-19 13:52:55
 * @FilePath: \巡检管理系统\巡检任务
 *
-->
<script setup lang="tsx">
import { ContentWrap } from '@/components/ContentWrap'
import { Search } from '@/components/Search'
import { Dialog } from '@/components/Dialog'
import { useI18n } from '@/hooks/web/useI18n'
import { Table } from '@/components/Table'
import { useTable } from '@/hooks/web/useTable'
import { useDictStore } from '@/store/modules/dictData'
import { Icon } from '@/components/Icon'
import { ref, unref, reactive, h } from 'vue'
import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
import PatrolInfoApi from '@/api/linePatrol'
import { PatrolPlanListType } from '@/api/linePatrol/type'
import TaskDetail from './components/TaskDetail.vue'
import { ElTag, ElCollapse, ElCollapseItem } from 'element-plus'
//引入安装的依赖
import * as XLSX from 'xlsx'
const ids = ref<string[]>([])
const DictStore = useDictStore()
//获取字典
DictStore.setDict('task_state') //状态字典
DictStore.setDict('fac_task_type') //巡检任务状态字典
DictStore.setDict('task_ioan_state') //检查状态字典
const { tableRegister, tableState, tableMethods } = useTable({
  fetchDataApi: async () => {
    const { currentPage, pageSize } = tableState
    const i = await PatrolInfoApi.PatrolplanList({
      pageNum: unref(currentPage),
      pageSize: unref(pageSize),
      ...unref(searchParams)
    })
    return {
      list: i.rows,
      total: i.total
    }
  },
  fetchDelApi: async () => {
    const res = await PatrolInfoApi.DeletpatrolInfo(unref(ids)[0])
    return !!res
  }
})
const { loading, dataList, total, currentPage, pageSize } = tableState
const { getList } = tableMethods

const searchParams = ref({})
const setSearchParams = (params: any) => {
  searchParams.value = params
  getList()
}
const { t } = useI18n()
const crudSchemas = reactive<CrudSchema[]>([
  {
    field: 'selection',
    search: {
      hidden: true
    },
    detail: {
      hidden: true
    },
    table: {
      type: 'selection'
    }
  },
  {
    field: 'index',
    label: t('tableDemo.index'),
    type: 'index',
    search: {
      hidden: true
    },
    detail: {
      hidden: true
    }
  },
  {
    field: 'taskState',
    label: t('状态'),
    width: '120px',
    search: {
      hidden: false,
      component: 'Select',
      componentProps: {
        placeholder: '状态',
        options: DictStore.$state.task_state?.map((item) => {
          return {
            label: item.dictLabel,
            value: item.dictValue
          }
        })
      }
    },
    formatter: (_: Recordable, __: any, cellValue: string) => {
      return DictStore.$state.task_state.map((item) => {
        if (item.dictValue == cellValue) {
          return h(ElTag, { type: item.listClass }, () => t(item.dictLabel))
        }
      })
    },
    detail: {
      slots: {
        default: (data: any) => {
          return DictStore.$state.task_state?.map((item) => {
            if (item.dictValue == data.taskState) {
              return <ElTag type={item.listClass}>{t(item.dictLabel)}</ElTag>
            }
          })
        }
      }
    }
  },
  {
    field: 'taskType',
    label: t('任务类型'),
    formatter: (_: Recordable, __: any, cellValue: string) => {
      return DictStore.$state.fac_task_type?.map((item) => {
        if (item.dictValue == cellValue) {
          return t(item.dictLabel)
        }
      })
    },
    search: {
      hidden: false,
      component: 'Select',
      componentProps: {
        placeholder: '任务类型',
        options: DictStore.$state.fac_task_type?.map((item) => {
          return {
            label: item.dictLabel,
            value: item.dictValue
          }
        })
      }
    },
    detail: {
      slots: {
        default: (data: any) => {
          return DictStore.$state.fac_task_type?.map((item) => {
            if (item.dictValue == data.taskType) {
              return <ElTag type={item.listClass}>{t(item.dictLabel)}</ElTag>
            }
          })
        }
      }
    }
  },
  {
    field: 'facName',
    label: t('任务名称'),
    search: {
      hidden: false,
      componentProps: {
        placeholder: '任务名称'
      }
    }
  },

  {
    field: 'planName',
    width: 100,
    label: t('所属计划'),
    search: {
      hidden: true
    }
  },
  {
    field: 'taskName',
    width: 150,
    label: t('所属周期'),
    search: {
      hidden: true
    }
  },
  {
    field: 'faciName',
    width: 120,
    label: t('类型'),
    search: {
      hidden: true
    }
  },
  {
    field: 'executeUser',
    width: 100,
    label: t('执行对象'),
    search: {
      hidden: true
    }
  },
  {
    field: 'finishUser',
    width: 100,
    label: t('完成人'),
    search: {
      hidden: false,
      componentProps: {
        placeholder: '完成人'
      }
    }
  },
  {
    field: 'finishDate',
    label: t('完成时间'),
    width: 150,
    search: {
      hidden: true
    }
  },
  {
    field: 'passRate',
    width: 100,
    label: t('检查人'),
    search: {
      component: 'Input',
      componentProps: {
        placeholder: '检查人'
      }
    }
  },
  {
    field: 'inspectDate',
    width: 150,
    label: t('检查时间'),
    search: {
      hidden: true
    }
  },
  {
    field: 'inspectState',
    width: 120,
    label: t('检查状态'),
    search: {
      hidden: true
    },
    formatter: (_: Recordable, __: any, cellValue: string) => {
      return DictStore.$state.task_ioan_state?.map((item) => {
        if (item.dictValue == cellValue) {
          return h(ElTag, { type: item.listClass }, () => t(item.dictLabel))
        }
      })
    },
    detail: {
      slots: {
        default: (data: PatrolPlanListType) => {
          return DictStore.$state.task_ioan_state?.map((item) => {
            if (item.dictValue == data.inspectState) {
              return <ElTag type={item.listClass}>{t(item.dictLabel)}</ElTag>
            }
          })
        }
      }
    }
  },
  {
    field: 'taskDesc',
    label: t('任务描述'),
    search: {
      hidden: true
    },
    table: {
      hidden: true
    }
  },
  {
    field: 'taskFile',
    label: t('任务附件'),
    search: {
      hidden: true
    },
    table: {
      hidden: true
    }
  },
  {
    field: 'action',
    label: t('tableDemo.action'),
    width: 200,
    fixed: 'right',
    search: {
      hidden: true
    },
    form: {
      hidden: true
    },
    detail: {
      hidden: true
    },
    table: {
      slots: {
        default: (data: any) => {
          return (
            <>
              <span class="TableBtn" onClick={() => action(data.row, 'Detail')}>
                {t('查看')}
              </span>
              <span class="TableBtn" onClick={() => action(data.row, 'TransferOffice')}>
                {t('转办')}
              </span>
            </>
          )
        }
      }
    }
  }
])
// @ts-ignore
const { allSchemas } = useCrudSchemas(crudSchemas)
const dialogVisible = ref(false)
const currentRow = ref<PatrolPlanListType>({})
const actionType = ref('')
//表格操作
const action = (row: PatrolPlanListType, type: string) => {
  actionType.value = type
  dialogVisible.value = true //打开弹窗
  currentRow.value = row
}
//巡检任务表格导出excel
const ExportTableData = () => {
  const workbook = XLSX.utils.book_new()
  //在table上建立的id属性
  const ws1 = XLSX.utils.table_to_sheet(document.getElementById('table'))
  XLSX.utils.book_append_sheet(workbook, ws1, 'Sheet1')
  XLSX.writeFile(workbook, `巡检任务.xlsx`)
}
const activeNames = ref(['0'])
</script>

<template>
  <ContentWrap>
    <BaseButton class="ExportBtn" type="warning" size="small" plain @click="ExportTableData">
      <Icon icon="ep:download" :size="13" />导出
    </BaseButton>
    <ElCollapse v-model="activeNames">
      <ElCollapseItem title="查询" name="1">
        <div style="padding-top: 10px">
          <Search
            :schema="allSchemas.searchSchema"
            :inline="true"
            @search="setSearchParams"
            @reset="setSearchParams"
          />
        </div>
      </ElCollapseItem>
    </ElCollapse>

    <Table
      id="table"
      v-model:pageSize="pageSize"
      v-model:currentPage="currentPage"
      :columns="allSchemas.tableColumns"
      :data="dataList"
      :loading="loading"
      row-key="uuid"
      :pagination="{
        total: total
      }"
      @register="tableRegister"
    />
  </ContentWrap>
  <Dialog v-model="dialogVisible" title="任务详情">
    <TaskDetail :detail-schema="allSchemas.detailSchema" :current-row="currentRow" />
  </Dialog>
</template>
<style scoped>
:deep(.el-card__body) {
  position: relative;
  padding-top: 0px !important;
}
:deep(.el-collapse-item) {
  padding: 15px 0;
}
:deep(.el-collapse-item__content) {
  padding-bottom: 0;
}
:deep(.el-collapse-item__header) {
  width: 68px;
  height: 29px;
  border-radius: 4px;
  color: white;
  background: #409eff;
  justify-content: center;
  font-size: 12px;
}
:deep(.el-collapse-item__arrow) {
  margin: 0 2px;
}
:deep(.ExportBtn) {
  position: absolute;
  left: 120px;
  top: 15px;
}
:deep(.TableBtn) {
  margin: 0 5px;
  cursor: pointer;
  color: #409eff;
  font-weight: 600;
}
</style>
